<template>
  <div>
    <van-nav-bar
      title="我的收藏"
      left-arrow
      @click-left="$router.go(-1)"
      @click-right="$router.push({ path: '/' })"
    >
      <template #right>
        <van-icon name="wap-home-o" size="6vw" />
      </template>
    </van-nav-bar>
    <!-- 2.0 收藏列表 -->
    <div class="list">
      <van-swipe-cell v-for="item in starList" :key="item.id">
        <MyPost :post="item"></MyPost>
        <template #right>
          <van-button
            square
            type="danger"
            text="删除"
            class="delete-btn"
            @click="deleteFn(item.id)"
          />
        </template>
      </van-swipe-cell>
    </div>
    <van-empty v-if="!starList.length" description="空空如也" />
  </div>
</template>

<script>
// 收藏文章列表
import { getuserStaAPI } from "../apis/user";
// 收藏文章
import {updatePostStarByIdAPI} from '../apis/news'
import MyPost from "../components/MyPost.vue";
export default {
  components: {
    MyPost,
  },
  data() {
    return {
      starList: [],
    };
  },
  async created() {
    const res = await getuserStaAPI();
    console.log(res);
    this.starList = res.data.data.map((item) => {
      return { ...item, comment_length: item.comments.length };
    });
  },
  methods: {
    // 删除收藏文章
     deleteFn(id) {
      // console.log(id);
      this.$dialog
        .confirm({
          title: "是否确认删除？",
        })
        .then(async () => {
          // 界面展示 删除DOM节点
          this.starList = this.starList.filter((item) => item.id !== id)
            // 发送请求—— 后端删除
            const res = await  updatePostStarByIdAPI(id)
            console.log(res);
            this.$toast.success("删除成功")
         ;
        })
        .catch(() => {
          // on cancel
        });
    },
  },
};
</script>

<style lang="less" scoped>
.delete-btn {
  height: 100%;
}
</style>